<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!-- Bootstrap v3.3.4 核心 CSS 文件 -->
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/jquery.min.js"></script>
    <!-- Bootstrap v3.3.4 核心 JavaScript 文件 -->
    <script src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/sqh_style_v2.0.css">
    <script src="../js/sqh_js_v2.0.js"></script>
    <title>修改密码</title>
</head>
<body class="">

<div class="container-fluid bg_232323 color_fff padding_top_10 padding_bottom_10">
    <a href="http://www.baidu.com">
        <div class=" col-xs-2">
            <span class="icon iconfont color_fff" aria-hidden="true">&#xe608;</span>
        </div>
    </a>
    <div class="col-xs-8 text-center">
        <span class="font_18"  role="button" aria-expanded="false">修改密码</span>
    </div>
    <div class="col-xs-2">
        <div class="col-xs-2 text-right">
        </div>
    </div>
</div>

<form>
<div class="line_height_40px container-fluid border_b_top_eee border_b_bottom_eee margin_top_10">
    <div class="">
        <div class="width_60px float_left">
            原密码
        </div>
        <div class="margin_left_60 relative">
            <input type="password" name="beforPwd" id="beforPwd" class="clear_border  all_width padding_right_25" placeholder="请输入原密码" maxlength="16">
            <span class="absolute padding_top_10" style="top: 0;right: 0;" onclick="clearPwd(this)">
                <img src="../img/tsdd/icon_del.png" onclick="" class="img-responsive width_20px ">
            </span>
        </div>
    </div>

    <div class="border_b_top_eee">
        <div class="width_60px float_left">
            新密码
        </div>
        <div class="margin_left_60 relative">
            <input type="password" name="newPwd" id="newPwd" class="clear_border  all_width padding_right_25" placeholder="请输入新密码" maxlength="16">
            <span class="absolute padding_top_10" style="top: 0;right: 0;" onclick="clearPwd(this)">
                <img src="../img/tsdd/icon_del.png" onclick="" class="img-responsive width_20px ">
            </span>
        </div>
    </div>

    <div class="border_b_top_eee">
        <div class="width_60px float_left">
            二次确认
        </div>
        <div class="margin_left_60 relative">
            <input type="password" name="renewPwd" id="renewPwd" class="clear_border  all_width padding_right_25" placeholder="再次输入密码" maxlength="16">
            <span class="absolute padding_top_10" style="top: 0;right: 0;" onclick="clearPwd(this)">
                <img src="../img/tsdd/icon_del.png" onclick="" class="img-responsive width_20px ">
            </span>
        </div>
    </div>

</div>

<div class="container-fluid line_height_40px margin_top_15">
    <div class="btn_gray all_width font_16" onclick="btnCommit(this)" id="submitBtn">确定</div>
    <input type="submit" value="确定" class="display_none" id="formSubmit">
</div>
</form>

</body>
<script>
    $(function(){
        beforPwd.onkeyup=changeBtn;
        newPwd.onkeyup=changeBtn;
        renewPwd.onkeyup=changeBtn;
    });

    //清楚当前密码内容
    function clearPwd(obj){
        var currentObj = $(obj);
        currentObj.prev("input")[0].value="";
        changeBtn();
    }

    //检查密码
    function checkPwd(targetId){
        var obj = document.getElementById(targetId);
        var pwd = obj.value;
        if(pwd.length=0){
            alert("密码不能为空");
            obj.focus();
            return true;
        }else if(pwd.length < 6){
            alert("密码长度至少为6位");
            obj.focus();
            return false;
        }else{
            return true;
        }
    }

    //检查是否输入，是否允许输入按钮
    function changeBtn(){
        var beforPwd = document.getElementById("beforPwd").value;
        var newPwd = document.getElementById("newPwd").value;
        var renewPwd = document.getElementById("renewPwd").value;
        if(beforPwd.length>0 && newPwd.length>0 && renewPwd.length>0){
            $("#submitBtn").removeClass("btn_gray").addClass("btn_blue");
        }else{
            $("#submitBtn").removeClass("btn_blue").addClass("btn_gray");
        }
    }

    //提交表单
    function btnCommit(obj){
        var currentObj = $(obj);
        if(currentObj.hasClass("btn_gray")){
            return false;
        }
        //通用的检查密码是否正确
        if(checkPwd("beforPwd") && checkPwd("newPwd") && checkPwd("renewPwd")){
            var newPwd = document.getElementById("newPwd").value;
            var renewPwd = document.getElementById("renewPwd").value;
            //判断两次输入的密码一致
            if(newPwd == renewPwd){
                document.getElementById("formSubmit").click();
            }
        }
    }

</script>
</html>
